<template>
  <div class="key-board">
    <div
      v-for="(item, index) in commands"
      :key="item.label"
      class="key-board-item"
      :class="`key-board-item-${index}${index === 0 ? ' key-board-item-reset' : ''}`"
      @click="handleClick(item)"
    >
      <!--<img :src="item.icon" alt="" style="width:100%;height: 100%;" />-->
      <div
        style="width: 100%;height: 100%;background-repeat: no-repeat;background-position: center center"
        :style="{
          backgroundImage: `url(${item.icon})`
        }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KeyBoard',
  props: {
    onClick: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      commands: [
        {
          label: '复位',
          icon: require('@/views/reservoir/videoMonitor/components/assets/images/Button-中.svg')
        },
        {
          label: '向上',
          icon: require('@/views/reservoir/videoMonitor/components/assets/images/Button-上.svg')
        },
        {
          label: '向右',
          icon: require('@/views/reservoir/videoMonitor/components/assets/images/Button-右.svg')
        },
        {
          label: '向下',
          icon: require('@/views/reservoir/videoMonitor/components/assets/images/Button-下.svg')
        },
        {
          label: '向左',
          icon: require('@/views/reservoir/videoMonitor/components/assets/images/Button-左.svg')
        }
      ]
    }
  },
  methods: {
    handleClick(item) {
      // alert(item.label)
      this.onClick(item)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
